<template>
	<view class="withdrawal">
		<u-navbar
			title="分润提现" 
			left-text="" 
			right-text="提现记录" 
			@leftClick="onClickBack" 
			@rightClick="onClickRight"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetTop="true"
		></u-navbar>
		<view class="content">
			<view class="accStyle">
				<view class="w-flex w-flex-between bg-blue acc">
					<view>
						<u-icon name="home" color="#fff"></u-icon>
					</view>
					<view>
						收款账户
					</view>
				</view>
			</view>
			<view>
				<u-cell-group :border="false">
					<u-cell title="可提现余额">
						<view slot="right-icon" class="w-flex">
							<text class="w-mr-15">{{availableBalance}} 元</text>
							<text class="all" @click="allWithdrawal">全部提现</text>
						</view>
					</u-cell>
					<u-cell title="止付金额">
						<view slot="right-icon">
							<text class="">{{stopBalance}}</text>
						</view>
					</u-cell>
					<u-cell title="提现金额">
						<view slot="right-icon">
							<input
								v-model="withdrawal.money"
								type="number"
								class="balance"
								placeholder="请输入至少0.1元金额"
							></input>
						</view>
					</u-cell>
					<u-cell title="支付宝账号">
						<view slot="right-icon">
							<input
								v-model="withdrawal.account"
								class="balance"
								placeholder="请输入支付宝账号"
							></input>
						</view>
					</u-cell>
					<u-cell title="收款人姓名">
						<view slot="right-icon">
							<input
								v-model="withdrawal.name"
								class="balance"
								placeholder="请输入收款人姓名"
							></input>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="w-flex w-mt-20 bottomBtn">
			<!-- <text class="btnStyle w-mr-10" @click="InvoiceEntry">发票录入</text> -->
			<text class="btnStyle" style="width: 90%;" @click="withdrawalChange">确定提现</text>
		</view>
		<view class="w-mt-20 tip">
			<view>
				温馨提示
			</view>
			<view class="w-flex w-mt-10" v-for="(item, index) in tipList" :key="index">
				<text class="circle"></text>
				<text style="color: #b1b1b1;font-size: 12px;">{{item.content}}</text>
			</view>
			
		</view>
		<!-- <view class="process">
			<navigator url="./process" class=" w-flex" hover-class="none">
				<text class="w-mr-5">分润下发流程</text>
				<u-icon name="arrow-right" color="#2979ff" size="12"></u-icon>
			</navigator>
		</view> -->
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="modal.show" :content='modal.content' @confirm="confirm" class="w-center"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			availableBalance: 0,
			stopBalance: 0,
			tipList: [
				{
					content: '打款金额=提现金额-计划止付金额，若提现金额小于计划止付金额，则实际打款金额为0'
				},
				{
					content: '可提现分润余额达到500元以上才可提现'
				},
				{
					content: '每月1日-22日可提取分润，其他时间不可提取'
				},
				{
					content: '分润提现必须像提供发票（手动录入），若无发票无法提取'
				},
				{
					content: '建议提前邮寄发票或保持发票余额充足'
				}
			],
			withdrawal: {
				account: '',
				money: null,
				name: ''
			},
			modal: {
				show: false,
				content: ''
			},
		}
	},
	onShow() {
		this.withdrawMoney()
	},
	methods: {
		// 返回页面
		onClickBack () {
			uni.navigateBack()
		},
		onClickRight(){
			uni.navigateTo({
				url: '/pages/payfor/record'
			})
		},
		allWithdrawal () {
			this.withdrawal.money = this.availableBalance
		},
		InvoiceEntry () {
			uni.navigateTo({
				url: './InvoiceEntry'
			})
		},
		async withdrawalChange () {
			
			if (this.withdrawal.money <= 0) {
				this.$refs.uToast.show({
					type: 'default',
					message: "请输入提现金额",
				})
				return
			}
			if (this.withdrawal.account === '') {
				this.$refs.uToast.show({
					type: 'default',
					message: "请输入支付宝账号",
				})
				return
			}
			if (this.withdrawal.name === '') {
				this.$refs.uToast.show({
					type: 'default',
					message: "请输入收款人姓名",
				})
				return
			}
			this.withdrawal.money = Number(this.withdrawal.money)
			const res = await this.$API({url: '/api/user/withdrawal', method:"POST", data: this.withdrawal})
			if (!res) {return}
			this.modal.show = true
			this.modal.content = res.msg
			
			
		},
		confirm () {
			this.modal.show = false
		},
		async withdrawMoney () {
			const res = await this.$API({url: '/api/user/withdraw_info', method:"POST", data: ''})
			if (!res) {return}
			this.availableBalance = res.data.money
		}
	}
}
</script>

<style lang="scss" scoped>
	.withdrawal {
		.content {
			.accStyle {
				padding: 0 40rpx;
				padding-top: 20rpx;
			}
			background: #FFFFFF;
			
			.acc {
				padding: 50rpx 20rpx;
				border-radius: 6px;
			}
			.all {
				font-size: 12px;
				color: #1678ff;
			}
			.balance {
				text-align: right;
			}
			
		}
		.bottomBtn {
			justify-content: center;
			.btnStyle {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 45%;
				height: 70rpx;
				background: #1678ff;
				color: #FFFFFF;
				font-size: 12px;
				border-radius: 10rpx;
			}
		}
		.tip {
			padding: 0 40rpx;
			.w-flex {
				align-items: flex-start;
			}
			.circle {
				display: flex;
				min-width: 10rpx;
				height: 10rpx;
				margin-top: 12rpx;
				border-radius: 50%;
				background: #999992;
				margin-right: 20rpx;
			}
		}
		.process {
			font-size: 12px;
			color: #1678ff;
			padding-left: 40rpx;
			margin-top: 20rpx;
		}
		/deep/.u-cell__title-text {
			font-size: 12px;
		}
		/deep/.u-cell__right-icon-wrap {
			font-size: 14px;
		}
		uni-input {
			font-size: 14px;
		}
	}
.uni-input-placeholder {
	color: #c1c1c1;
}
</style>
